<template>
  <div>
      <div class="div">
        <table border="1" width='300'>
            <tr>
                <td>姓名</td>
                <td>积分</td>
                <td>操作</td>
            </tr>
            <tr v-for='item in users'>
                <td>{{item.name}}</td>
                <td>{{item.fen}}</td>
                <td>
                    <p>
                    <button v-show='item.upgrade' @click='upgrade(item.id)'>升级部门</button>
                    <button v-if="item.is_work==0" @click="work(item.id)">打卡</button>
                    <button v-else @click="work(item.id)">下班</button>
                    </p>

                </td>
            </tr>
        </table>
        搜索记录:<input type="text" v-model="text"> <button @click="search">搜索</button>
        <table border="1">
            <tr>
                <td>名称</td>
                <td>打卡时间</td>
                <td>上班时间</td>
                <td>下班时间</td>
                <td>积分变化</td>
            </tr>
            <tr v-for='item in cards'>
                <td>{{item.name}}</td>
                <td>{{item.push_time| make_time}}</td>
                <td>{{item.work_time| make_time}}</td>
                <td>{{item.off_time| make_time}}</td>
                <td>{{item.fen}}</td>
            </tr>
        </table>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            users:[],
            text:'',
            cards:[]
        }
    },
    created(){
        this.get_user()
    },
    filters:{
        make_time(str){
            str = str.replace('T'," ")
            return str
        }
    },
    methods:{
        upgrade(id){
            axios.get('http://127.0.0.1:8000/myapp/upgrade/',{
                params:{id:id}
            }).then(res=>{
                console.log(res.data)
                if(res.data.code==200){
                    window.location.reload()
                }
  
            })
        },
        get_user(){
            axios.get('http://127.0.0.1:8000/myapp/show_user/').then(res=>{
                console.log(res.data)
                this.users= res.data.data
                
            })
        },
        work(id){
            axios.get('http://127.0.0.1:8000/myapp/punch/',{
                params:{id:id}
            }).then(res=>{
                window.location.reload()
            })
        },
        search(){
            axios.get('http://127.0.0.1:8000/myapp/search/',{
                params:{column:this.text}
            }).then(res=>{
                console.log(res.data)
                this.cards= res.data.data
            })
        }
    }
}
</script>

<style>
.div{
    margin-left: 45%;
}
</style>